<template>
    <el-container>
        <el-header :height="'auto'" class="mb20">
            <breadcrumb :title="'IP修改审核单'" :noBack="true"></breadcrumb>
        </el-header>
        <el-main>
            <el-container class="white-block box full" v-loading="loading">
                <el-header :height="'auto'">
                    <div class="toolbar">
                        <div>
                            <el-input v-model="appName" placeholder="输入自建系统名称" class="input mr10"
                                      size="small"></el-input>
                            <el-input v-model="ip" placeholder="输入IP" class="input mr10" size="small"></el-input>
                            <el-select v-model="state" placeholder="选择状态" class="mr10" size="small">
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <el-button class="primary" @click="getList(1)" size="small">查询</el-button>
                            <el-button class="minor" @click="reset()" size="small">重置</el-button>
                        </div>
                    </div>
                </el-header>
                <el-main class="mt10">
                    <table-example :data="tableData" :tableColumn="header" :slotColumns="slotColumns" :height="'100%'"
                                   ref="table">
                        <template slot="userName" slot-scope="scope">
                            <span>{{scope.row.userName}}</span>
                            <div v-if="scope.row.userDept">
                                <el-button class="primary limit text" size="mini" style="margin-top: 3px;">
                                    {{scope.row.userDept}}
                                </el-button>
                            </div>
                        </template>
                        <template slot="ipList" slot-scope="scope">
                            <p v-for="(item,index) in scope.row.ipList" :key="index">{{item}}</p>
                        </template>
                        <template slot="operation" slot-scope="scope">
                            <div class="operation">
                                <el-link type="primary" :underline="false"
                                         v-if="scope.row.result==1"
                                         @click="openDialog(scope.row)">
                                    审核
                                </el-link>
                                <el-link type="primary" :underline="false"
                                         :class="{mr10:(scope.row.state==2||scope.row.state==3)}"
                                         @click="openDetail(scope.row)">查看
                                </el-link>
                            </div>
                        </template>
                        <template slot="currentState" slot-scope="scope">
                            <span v-if="scope.row.currentState==6">审核通过</span>
                            <span v-else-if="scope.row.currentState==2||scope.row.currentState==3">待审核</span>
                            <span v-else-if="scope.row.currentState==2||scope.row.currentState==4">审核中</span>
                            <span v-else-if="scope.row.currentState==7" class="error">审核不通过</span>
                        </template>
                    </table-example>
                </el-main>
                <el-footer :height="'auto'" class="mt20">
                    <page :data="data" v-if="data" class="page" key="hotList" @jumpPage="getList"></page>
                </el-footer>
            </el-container>
            <dialog-box :show.sync="show" ref="dialog" :width="'600px'" :title="'需求审核'" @save="auditSave"
                        @cancel="auditDel">
                <audit :labelWidth="'90px'" :showType="false" :showBtn="false" ref="audit" v-if="show"></audit>
            </dialog-box>
            <transition name="slide">
                <router-view @upload="getList"></router-view>
            </transition>
        </el-main>
    </el-container>
</template>

<script>
    import breadcrumb from '../../components/breadcrumb'
    import tableExample from '../../components/table'
    import page from '../../components/pagination'
    import dialogBox from '../../components/dialog'
    import audit from '../../components/audit'

    export default {

        data() {
            return {
                options: [
                    {
                        value: null,
                        label: ''
                    },
                    {
                        value: 2,
                        label: '待审核'
                    },
                    {
                        value: 6,
                        label: '审核通过'
                    },
                    {
                        value: 7,
                        label: '审核不通过'
                    }
                ],
                tableData: [],
                header: [
                    {
                        prop: 'applyNum',
                        label: '申请单号',
                        minWidth: '130',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'sysName',
                        label: '自建系统名称',
                        minWidth: '150',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'ipList',
                        label: 'IP',
                        minWidth: '120',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'userName',
                        label: '申请人',
                        minWidth: '150',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'createTime',
                        label: '申请日期',
                        minWidth: '150',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'currentState',
                        label: '当前状态',
                        width: '100',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        align: 'center',
                        minWidth: '100',
                        fixed: 'right'
                    }
                ],
                slotColumns: ['operation', 'userName', 'currentState', 'ipList'],
                data: null,
                appName: '',
                ip: '',
                state: '',
                loading: false,
                index: 1,
                show: false,
                currentList: null
            }
        },
        mounted() {
            this.getList()
        },
        methods: {
            getList(index) {
                this.loading = true
                if (index) this.index = index
                this.$http.get('/admin/ipOrderManagerList', {
                    current: this.index || 1,
                    size: 15,
                    state: this.state,
                    appName: this.appName,
                    ip: this.ip
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.tableData = result.data.records
                        this.data = result.data
                        delete this.data['records']
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            reset() {
                this.ip = ''
                this.appName = ''
                this.state = ''
                this.getList(1)
            },
            openDetail(row) {
                this.$router.push({
                    path: this.$route.path + '/detail',
                    query: {
                        id: row.id,
                        applyNo: row.applyNo
                    }
                })
            },
            openDialog(row) {
                this.currentList = row
                this.show = true
            },
            auditSave() {
                let form = this.$refs.audit.formData
                this.show = false
                this.loading = true
                this.$http.post('/deptAdmin/ipOrderApproval', {
                    ipApplyNo: this.currentList.applyNum,
                    remark: form.remark,
                    result: form.state
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.getList()
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            // 关闭对话框
            auditDel() {
                this.show = false
                this.currentList = null
            }
        },
        components: {
            tableExample,
            breadcrumb,
            page,
            dialogBox,
            audit
        }
    }
</script>

<style scoped lang="less">

</style>
